import React, { memo, useState, useRef } from 'react'
import { Carousel } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { AppBannersWrap } from './style'


export default memo(function AppBanners(props) {
  const { banners } = props
  const [currentIndex, setCurrentIndex] = useState(0)

  const bannerRef = useRef()

  const bannerChange = (from, to) => {
    setCurrentIndex(to)
  }

  const bg = banners[currentIndex]?.imageUrl + "?imageView&blur=40x20"
  return (
    <AppBannersWrap bgImage={bg}>
      <Carousel autoplay effect="fade" beforeChange={bannerChange} ref={bannerRef}>
        {
          banners.map((item, index) => {
            return (
              <div className="banner-item" key={item.imageUrl}>
                <img src={item.imageUrl} alt="" />
              </div>
            )
          })
        }
      </Carousel>
      <button className="btn prev" onClick={(e) => bannerRef.current.prev()}>
        <LeftOutlined />
      </button>
      <button className="btn next" onClick={(e) => bannerRef.current.next()}>
        <RightOutlined />
      </button>

    </AppBannersWrap>
  )
})
